<template>
  <router-link class="link inline-flex items-center" :to="path">
    <span class="font-size-18px lh-26px link">查看更多</span>
    <img src="@/assets/more-arrow.svg" alt="" class="link-icon" />
  </router-link>
</template>
<script setup>
defineProps({
  path: {
    type: String,
    required: true,
  },
});
</script>

<style scoped lang="less">
.link {
  transition: opacity 0.1s;
  &:hover {
    opacity: 0.7;
  }

  .font-size-18px {
    font-size: 18px;
  }

  .lh-26px {
    line-height: 26px;
  }

  .link-icon {
    width: auto;
    height: auto;
  }


  @media screen and (max-width: 768px) {
    .font-size-18px {
      font-size: 14px;
    }

    .lh-26px {
      line-height: 20px;
    }
  }
}
</style>
